<template>
	<view>
		<view class="coverArea jc-between" :style="{backgroundImage: 'url('+userInfo.profile.backgroundUrl+')'}">
			<u-navbar :background="{background:'transparent'}" back-icon-color="#fff" :border-bottom="false" :back-text-style="{color: '#000'}" />
			<view class="infoArea">
				<view class="avatar" :style="{backgroundImage: 'url('+userInfo.profile.avatarUrl+')'}"></view>
				<view class="nickname">{{userInfo.profile.nickname}}</view>
				<view><text>关注 {{userInfo.profile.follows}}</text><text>|</text><text>粉丝 {{userInfo.profile.followeds}}</text></view>
				<view>
					<view class="ai-center" :class="{male:userInfo.profile.gender==1,female:userInfo.profile.gender==2}">
						<view class="sexIcon"></view>{{userInfo.profile.birthday|age}}
					</view>
					<view>Lv.{{userInfo.level}}</view>
				</view>
			</view>
			<view class="modify jc-end ai-end">
				<view>
					编辑
				</view>
				<view>
					更换背景
				</view>
			</view>
		</view>

		<view class="userHome">
			<view class="nav jc-between">
				<view class="navItemOuter jc-center ai-center" @click="navs.forEach((vm,i)=>index==i?vm.active=true:vm.active=false)"
				 v-for="(item,index) in navs" :key="index">
					<view class="ai-center" :class="{activeNav:item.active}">
						{{item.title}}
					</view>
				</view>
			</view>

			<userInfoHome v-show="navs[0].active" />
			<userInfoDynamic v-show="navs[1].active" />

		</view>
	</view>
</template>

<script>
	import {
		getUserDetail_auto
	} from '../../api/account.js'
	export default {
		data() {
			return {
				userInfo: {
					profile: {}
				},
				navs: [{
					title: '主页',
					active: true
				}, {
					title: '动态',
					active: false
				}, ]
			};
		},

		async created() {
			this.userInfo = await getUserDetail_auto()
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-navbar-placeholder {
		display: none;
	}

	$coverHeight: 290px;

	.coverArea {
		@include bgRepeate_none();
		background-color: #fff;
		height: $coverHeight;
		position: relative;
		padding: 40px 18px 48px 18px;

		view,
		text {
			position: relative;
			z-index: 3;
		}

		&:after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: rgba($color: #000000, $alpha: 0.2);
			z-index: 2;
		}

		.infoArea {
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			height: 100%;
			flex: 6;

			.avatar {
				@include bgRepeate('/static/mine/avatar_notLogin.png');
				@include roundness(78);
				border: 1px solid #fff;
				margin-bottom: 16px;
			}

			>view:nth-of-type(2) {
				font-size: 15px;
				margin-bottom: 7px;
			}

			>view:nth-of-type(3) {
				color: #ccc;
				font-size: 12px;
				margin-bottom: 7px;

				>text:first-child {
					margin-right: 7px;
				}

				>text:nth-of-type(2) {
					opacity: 0.2;
				}

				>text:last-child {
					margin-left: 7px;
				}
			}

			>view:nth-of-type(4) {
				display: flex;
				font-size: 12px;

				>view:first-of-type {
					border-radius: 12px;
					padding: 1px 8px 1px 6px;
				}

				>view:last-child {
					margin-left: 8px;
					border-radius: 12px;
					padding: 1px 10px 1px 8px;
					background-color: rgba($color: #ccc, $alpha: 0.6);
					font-style: italic;
				}

				.male {
					background-color: rgba($color: #71C4F1, $alpha: 0.6);

					.sexIcon {
						@include bgRepeate('/static/mine/male.png');
						@include roundness(12);
						margin-right: 2px;
					}
				}

				.female {
					background-color: rgba($color: #FF8DBF, $alpha: 0.6);

					.sexIcon {
						@include bgRepeate('/static/mine/female.png');
						@include roundness(12);
						margin-right: 2px;
					}
				}
			}
		}

		.modify {
			flex: 4;
			color: #fff;
			font-size: 12px;

			>view {
				padding: 8px 14px;
				border-radius: 20px;
				background-color: rgba($color: #ccc, $alpha: 0.6);
			}

			>view:first-child {
				margin-right: 4px;
			}
		}
	}

	.userHome {
		min-height: calc(100vh - #{$coverHeight} + 30px);
		border-top-left-radius: 23px;
		border-top-right-radius: 23px;
		background-color: #fff;
		margin-top: -30px;
		z-index: 4;
		position: relative;

		.nav {
			height: 40px;
			border-bottom: 1px solid #e6e6e6;
			font-weight: bold;

			.navItemOuter {
				flex: 1;

				>view {
					position: relative;
					height: 100%;

					&:after {
						content: '';
						bottom: 0;
						left: 0;
						position: absolute;
						width: 100%;
						border-bottom: 2px solid transparent;
					}
				}

				.activeNav {
					color: $primary;

					&:after {
						content: '';
						bottom: 0;
						left: 0;
						position: absolute;
						width: 100%;
						border-bottom: 2px solid $primary;
					}
				}
			}
		}


	}
</style>
